<template>
  <div>
    <div class="login-box">
      <div class="login-box-logo">
        <div class="login-box-logo_count">
          <div class="login-box-logo_jin">金币余额</div>
          <div class="login-box-logo_yeP">{{wallet}}</div>
        </div>
      </div>


    </div>
    <div class="add_gold">
      <div v-for="(item,index) in list" :key="item.id" :class="item.id===select?'add_login_select':'no_add_login_select'" @click="select=item.id">
        <div class="price_jin">{{item.title}}</div>
        <div class="price_jia">{{item.price}}</div>
        <span class="price_jia_logo" v-if="item.id===select">
           <svg-icon style="width:22px;height: 15px;" name="select" />
        </span>
      </div>
<!--      <div>-->
<!--        <div class="price_jin">300金币</div>-->
<!--        <div class="price_jia">300金币</div>-->
<!--      </div>-->
<!--      <div>-->
<!--        <div class="price_jin">1000金币</div>-->
<!--        <div class="price_jia">1000金币</div>-->
<!--      </div>-->
    </div>
    <div class="test_col add_cz_count">如充值通道异常失效，请多尝试几次即可成功</div>
    <div class="test_col add_cz_but" @click="topUp">自动充值 快捷到账</div>
    <div class="test_col add_cz_btn_test" style="margin-top: 16px">支付成功后，请返回此页面手动刷新，约3分钟内到账</div>
    <div class="test_col add_cz_btn_test">如30分钟内仍未到账，请在右上角</div>
    <div class="test_col add_cz_btn_test">反馈中心反馈后添加>><span style="color:#FAE451;text-decoration: underline #FAE451;">支付成功截图</span></div>


<!--       </div>-->
    <div class="test_col add_cz_btn_test" style="margin-top: 10px">我们的客服将为您提供7*24服务</div>
  </div>

  <van-popup v-model:show="showCenter" position="center" style="min-height: 281px;width:360px;padding: 8px;background-color: #E4E4E4;border-radius: 4px" >
    <div class="prop_tit">
      <div style="width: 20px"></div>
      <div class="prop_tit_z">选择支付方式</div>
      <div style="margin-right: 4px">
        <svg-icon @click="showCenter= false" style="width:24px;height: 24px;" name="closrBtn" />
      </div>
    </div>
    <div class="prop_jin"><span style="font-size: 16px;">￥</span>{{selectNum}}</div>
    <div class="prop_txt">订单支付金额</div>

    <div class="play_list">
      <div v-for="(item) in payList" :key="index" @click="rechargeChannel(item)" style="color: #000;font-weight: bold">
        <svg-icon v-if="item.nickname==='支付宝'" style="width:24px;height: 24px;margin-right: 8px;color: #000" name="zhiFuBao" />
        <van-image
            style="margin-right: 8px;"
            v-else
            width="24"
            height="24"
            :src="ylImg"
        />
        {{item.name}}
      </div>
    </div>
    <div class="play_list_tit">如充值通道异常失败，请多尝试几次即可成功</div>

  </van-popup>
</template>

<script lang="ts" setup>
import ylImg from "@/image/image1_0/yl.png"
import { ref, reactive ,onMounted} from "vue";
import {UserWallet,PayChannelList,StartPayment} from "@/api/mock";
import {showFailToast} from "vant";
import {useRouter} from "vue-router";
const payChannelList = ()=>{
  PayChannelList().then(res=>{
        payList.value = res.data
    console.log(payList.value)
      }
  )
}
const pay = ref(false)
const payList = ref([])
const router = useRouter()
const selectNum = ref(30)
const topUp = ()=>{
  if(select.value===1){
    selectNum.value = 30
  }
  if(select.value===2){
    selectNum.value = 60
  }
  if(select.value===3){
    selectNum.value =100
  }
  showCenter.value = true
}
const rechargeChannel = (e)=>{
  if(pay.value){
    return;
  }

  let pa = {
    user_id:localStorage.getItem("token"),
    pay_money:selectNum.value,
    channel_name:e.nickname,
    product_name:selectNum.value
  }
  if(!pa.user_id){
    router.push({
      path: "/login",
      query: {
        mode: "",
      },
    });
    return
  }
  pay.value = true
  StartPayment(pa).then(res=>{
    if(+res.code===200){
      window.location.href=res.data.pay_url
      showCenter.value=false
      pay.value = false
    }
    pay.value = false
  }).catch(
      ()=>{
        pay.value = false
      }
  )


}
onMounted(() => {
  userWallet()
  payChannelList()
})

const showCenter = ref(false)
const select = ref(1)
const wallet = ref(0)
const userWallet = ()=>{

  let pa = {
    user_id:localStorage.getItem("token")
  }
  if(!pa.user_id){
    router.push({
      path: "/login",
      query: {
        mode: "",
      },
    });
    return
  }
  console.log(pa)
  UserWallet(pa).then(
      (res) => {
        if (+res.code === 200){
          // userLI.value = res.data
          wallet.value = res.data.wallet
          // proxy.$sayIs_vip(res.data.is_vip)


          // toLogin()
        }else{
          showFailToast(res.msg);

        }

      },
      err => {
        console.log(err);
        // showFailToast("请求有误");
      }
  );
}

const list = ref([
  {
    title:'30金币',
    price:'30元',
    mun:30,
    id : 1
  },
  {
    title:'60金币',
    price:'60元',
    num:60,
    id : 2
  },
  {
    title:'100金币',
    price:'100元',
    num: 100,
    id : 3
  },
]);
</script>

<style scoped  lang="less">
.no_add_login_select{
  border: 1px solid #4b4b4b;
}
.play_list_tit{
  font-weight: 400;
  font-size: 14px;
  color: #373737;
  text-align: center;
  margin-top: 12px;
}
.play_list{
  min-height: 118px;
  >div{
    width: calc(50% - 4px);
    background-color: #fff;
    border: 1px solid #C1C1C1;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    height: 44px;
    margin-top: 14px;
  }


  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.prop_jin{
  margin-top: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: #1A674E;
  margin-left: -4px;
}
.prop_txt{
  text-align: center;
  font-size: 12px;
  color: #1A674E;
  font-weight: 600;

}
.prop_tit_z{
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color:#1A674E;
}
.prop_tit{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.add_cz_btn_test{
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.86px;
  text-align: center;
  //width: 267px;
  margin:0px auto 0;
}
.add_cz_but{
  line-height: 50px;
  width: 269px;
  background-color: #1A674E;
  margin: 0 auto;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  border-radius: 8px;
}
.add_cz_count{
  font-weight: 400;
  font-size: 12px;
  line-height: 50px;
}
.test_col{
  text-align: center;
  color: #fff;
}
.price_jia_logo{
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
}
.add_login_select{
  border: 1px solid #348775;
  position: relative;
}
.price_jia{
  font-size: 16px;
  line-height: 28px;
  color: #AFAFAF;
}
.price_jin{
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  line-height: 28px;
}
.add_gold{
  width:100%;
  padding:0 10px 0 10px;
  display: flex;
  justify-content: space-between;
  >div{
    background-color: #373737;
    width: calc(33% - 2px);
    border-radius: 4px;
    height: 104px;
    display: flex;
    flex-direction:column;
    justify-content: center;
    >div{
      text-align: center;
      width: 100%;
      //height: 100%;

    }
  }
}
.login-box{
  ::v-deep .van-divider{
    margin: 8px 0 0 0;
  }
  width: 100%;
  //background-color: #373737;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
  .login-box-logo_count{
    display: flex;
    flex-direction:column;
    justify-content: center;
    //align-items: left;
    flex-wrap: wrap;
    margin: auto 0;
  }
  .login-box-logo{
    display: flex;
    width: 100%;
    height: 82px;
    padding-left: 14px;
    background-image: url("../../image/image1_0/much.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    color: #fff;
    .login-box-logo_jin{
      width: 100%;
      font-size: 13px;
    }
    .login-box-logo_yeP{
      width: 100%;

      font-size: 22px;
    }
  }
  .login-box_li{
    //background-color: #282828;
    color: #fff;
    display: flex;
    justify-content: left;
    align-items: center;
    margin: 8px 0 0 0;
    font-weight: bold;
    font-size: 0.78rem;
  }
}

</style>
